import './index.less';
import store from '@/store';
import { activeList } from '@/pages/common/constant.js';

export default {
  name: 'DotHistory',
  functional: true,
  render(h, ctx) {
    const order = store.state.setting.historicalSegmentPointReversed;
    let leg = Math.abs(ctx.props?.leg ?? 0);
    const cLeg = Math.abs(ctx.props?.cLeg ?? 0);
    const type = ctx.props?.type ?? '';
    const eventType = ctx.props?.eventType ?? '';
    const iWidth = ctx.props?.iWidth ?? '';
    const dotNum = ctx.props?.dotNum ?? 10;
    const pa = [];
    const dotData = ctx.props?.data ?? [];
    const info = Object.prototype.toString.call(dotData) === '[object Array]'
      ? dotData
      : dotData?.split(',');

    const dotType = ctx.props.dotType ?? [];
    const showNumber = ctx.props.showNumber ?? true;
    const code = ctx.props.code ?? '';
    const tailnumber = ctx.props.tailnumber ?? true;

    const dotClickHandler = (e, leg) => {
      e.stopPropagation();
      store.commit('faultMonitoring/setState', { key: 'detailsVisible2', payload: true });
      localStorage.setItem('dotDetailRow', JSON.stringify({ code, tailNumber: tailnumber, leg, type: eventType }));
    };

    const upperDotType = (dotType) => {
      switch (dotType.toUpperCase()) {
        case 'ACTIVE':
          return 'A';
        case 'INACTIVE':
          return 'I';
        case 'HARD':
          return 'H';
        case 'LATCHED':
          return 'L';
      }
    };

    if (type === 't2') {
      leg = Math.floor(leg / 9) * 10;
    }

    let dList = [];

    dotNum === 15 ? leg = Math.max(0, leg - 3) : '';
    for (let di = leg; di < dotNum + leg; di++) {
      dList.push(di);
    }

    order === false ? dList = dList.reverse() : dList;
    for (const i of dList) {
      const infoI = info?.findIndex(item => (item === String(i) || item === i || item === (0 - i))) ?? -1;
      if (infoI > -1) {
        const type = upperDotType(activeList.find(item => item.value === dotType[infoI])?.name ?? '');

        pa.unshift(
          <div class={['em-history-box-item', i === 0 ? 'ai-center' : '']} style={{ 'width': `${iWidth}px` }} onClick={(e) => dotClickHandler(e, cLeg)}>
            <span class='ehbi-dot'>{type}</span>
            {showNumber ? <span class='numbers ehbi-text'>{0 - +i}</span> : ''}

          </div>
        );
      } else {
        pa.unshift(
          <div class='em-history-box-item' style={{ 'width': `${iWidth}px` }} onClick={(e) => dotClickHandler(e, cLeg)}>
            <span class='ehbi-dot-ak'></span>
            {/* <span>{0 - +i}</span> */}
          </div>
        );
      }
    }

    return (
      <div class='em-history-box'>
          {...pa}
      </div>
    );
  }
};
